<template>
  <div class="upload-photo">
    <div class="table">
      <Table :columns="columns" :data="files" height="300">
        <template slot-scope="{ row }" slot="pic">
          <img :src="row.thumb" width="60" height="auto" />
        </template>
        <template slot-scope="{ row }" slot="name">
          <!-- <Input
            type="text"
            v-model="row.name"
            @blur="updateFile(row, row.name)"
          />-->
          {{ row.name }}
        </template>
        <template slot-scope="{ row }" slot="size">{{ row.size | filterSize }}</template>
        <template slot-scope="{ row }" slot="status">
          <div class="upload-status">
            <Progress
              :percent="parseInt(row.progress)"
              :status="row | filterStatus"
              :class="row | filterStatus"
              hide-info
            >
              <Icon type="checkmark-circled"></Icon>
            </Progress>
            <div class="status-des ml-5">
              <span v-if="row.error">
                <Tooltip max-width="150" :content="row.response.message" theme="light">
                  上传失败
                  <Icon size="12" color="#ff9900" type="md-help-circle" />
                </Tooltip>
              </span>
              <span v-else-if="row.active">上传中</span>
              <span v-else-if="row.success">成功</span>
              <span v-else>待上传</span>
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="action">
          <span
            :class="{ disabled: !row.active }"
            class="mr-5"
            @click="
              row.active ? $refs.upload.update(row, { error: 'cancel' }) : false
            "
          >取消</span>
          <span
            v-if="row.active"
            class="hasSplitLast mr-5"
            @click.prevent="$refs.uploader.update(row, { active: false })"
          >| 中止</span>
          <span
            v-else-if="row.error && $refs.uploader.features.html5"
            class="hasSplitLast mr-5"
            @click.prevent="
              $refs.uploader.update(row, {
                active: true,
                error: '',
                progress: '0.00'
              })
            "
          >| 重试</span>
          <span class="hasSplitLast" @click.prevent="$refs.uploader.remove(row)">| 移除</span>
        </template>
      </Table>
    </div>
    <div class="upload-btn mt-15">
      <vue-upload
        :postAction="postAction"
        :extensions="extensions"
        :accept="accept"
        :multiple="multiple"
        :thread="5"
        :headers="{ wecSchoolId: 1019427682571829 }"
        :size="size"
        v-model="files"
        @input-file="inputFile"
        @input-filter="inputFilter"
        ref="uploader"
        :data="datas"
      >
        <Button type="primary" class="mr-10">
          <Icon type="md-images" class="mr-10" />选择文件
        </Button>
      </vue-upload>
      <Button
        v-if="!$refs.upload || !$refs.upload.active"
        @click.prevent="$refs.uploader.active = true"
        class="start-bt"
      >开始上传</Button>
      <Button v-else @click="$refs.upload.active = false">上传失败</Button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import vueUpload from "vue-upload-component";
import { Tools } from "@/model/tools.ts";
import { UPLOAD_IMAGE } from "@utils/type.ts";
import { filterSize, filterStatus } from "@/filters/register-filter.ts";
@Component({
  components: {
    vueUpload
  }
  // filters: {
  //   //局部过滤器
  //   filterSize,
  //   filterStatus
  // }
})
export default class UploadPhoto extends Tools {
  public $refs!: {
    uploader: any;
  };
  @Prop({ default: "image/png, image/gif, image/jpeg, image/webp" })
  private accept!: string;
  @Prop({ default: "gif,jpg,jpeg,png,webp" })
  private extensions!: string;
  @Prop({ default: 1024 * 1024 * 1 })
  private size!: number;
  @Prop({ default: true })
  private multiple!: boolean; // 传入默认值,错误写法 private  multiple: boolean = true
  @Prop({ default: UPLOAD_IMAGE })
  private postAction!: string;
  @Prop()
  private tagType!: [string, number];

  private files: Array<any> = []; //存放在组件的file对象
  //上传的参数类型Id
  private get datas() {
    return { photoType: this.tagType };
  }
  private get columns() {
    return [
      {
        title: "缩略图",
        slot: "pic"
      },
      {
        title: "文件名",
        slot: "name"
      },
      {
        title: "大小",
        slot: "size"
      },
      {
        title: "状态",
        slot: "status"
      },
      {
        title: "操作",
        slot: "action",
        align: "center"
      }
    ];
  }

  private updateFile(name, file) {
    this.$refs.uploader.update(file, { name: name });
  }

  /**
   * 父类调用子类的clearFile()方法
   */
  private clearFile() {
    this.$refs.uploader.clear();
  }

  // 当 add, update, remove File 这些事件的时候会触发
  private inputFile(newFile, oldFile) {
    // 上传完成
    if (newFile && !oldFile) {
      // add
      console.log("add", newFile);
    }
    if (newFile && oldFile) {
      // update
      console.log("update", newFile);
    }

    if (!newFile && oldFile) {
      // remove
      console.log("remove", oldFile);
    }
    //自动上传
    console.log(this.$refs.uploader.uploaded, "监听文件上传的操作");
    this.$emit("update:uploaded", this.$refs.uploader.uploaded);
    //this.$emit("update:disabled", false); //若点击上传则不可以切换照片类型
  }

  // 文件过滤，可以通过 prevent 来阻止上传
  private inputFilter(newFile, oldFile, prevent) {
    if (newFile && !oldFile) {
      // 添加文件前
      // 过滤系统文件 和隐藏文件
      if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
        return prevent();
      }
      // 过滤 php html js 文件
      if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
        return prevent();
      }
    }
    if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
      // 创建 blob 字段 用于图片预览
      newFile.blob = "";
      //let URL = window.URL || window.webkitURL;
      let URL = window.URL;
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file);
      }
      // 自动压缩
      newFile.thumb = "";
      if (newFile.blob && newFile.type.substr(0, 6) === "image/") {
        newFile.thumb = newFile.blob;
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.upload-photo {
  .start-bt {
    vertical-align: top
  }
  .disabled {
    color: #ccc
  }
  .upload-status {
    display: flex
    align-items: center
    >>>.ivu-progress.wrong .ivu-progress-bg {
      transition: 0.3s
      background: #D93816
    }
    .status-des {
      width: 100px
    }
  }
}
</style>
